<template>
  <div class="toolbar b_flex ">
     <!--一级-->
    <div v-if="grade == 1" @click="exchangeRoute('insurances')"
         :class="[currentRouter == 'insurances' ? 'insure-active' : 'insure-unactive' ]"
         class="toolbar-wrap">
      <i></i>
      <p>保险</p>
    </div>
    <div v-if="grade == 1" @click="exchangeRoute('member')"
         :class="[currentRouter == 'member' ? 'member-active' : 'member-unactive' ]"
         class="toolbar-wrap">
      <i></i>
      <p>下级</p>
    </div>
    <!--二级-->
    <div v-if="grade == 2" @click="exchangeRoute('insurances')"
         :class="[currentRouter == 'insurances' ? 'insure-active' : 'insure-unactive' ]"
         class="toolbar-wrap">
      <i></i>
      <p>保险</p>
    </div>
    <div v-if="grade == 2" @click="exchangeRoute('member')"
         :class="[currentRouter == 'member' ? 'performance-active' : 'performance-unactive' ]"
         class="toolbar-wrap">
      <i></i>
      <p>业绩</p>
    </div>


  </div>
</template>
<script type="text/babel">
  export default {
    props: {
      grade: {
        type: [String,Number] ,
        default: 0
      }
    },
    data() {
      return {
        currentRouter : 'insurances' // insure or member
      }
    },
    created(){
      const path = location.hash
      if( path.indexOf("member")  > -1 ){
        this.currentRouter = "member"
      }
      else{
        this.currentRouter = "insurances"
      }

    },
    mounted() {

    },
    methods: {
      skipTohome() {
        this.$router.push("/home")
      },
      async toSecondMember() {


      },
      exchangeRoute(route) {
        this.currentRouter = route
        this.$router.push(`/${route}`)
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~@/assets/css/global.less";

  .toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #FCFCFC;
    justify-content: space-around;
  }

  .toolbar-wrap {
    width: 20%;
    display: inline-block;
    text-align: center;
    padding: 17px 0 7px;
    i {
      margin: auto;
      display: block;
      width: 34px;
      height: 38px;
      background-size: 100%;
      margin-bottom: 7px;
    }
    p {
      .c_333 ;
      .font-medium;
      font-size: 22px;
      text-align: center;
    }
    &.insure-active {
      i {
        background-image: url("~@/assets/images/push/baoxian-press@2x.png");
      }
    }
    &.insure-unactive {
      i {
        background-image: url("~@/assets/images/push/baoxian-normal@2x.png");
      }
      p {
        color: #919191;
        .font-regular;
      }
    }
    &.member-active {
      i {
        background-image: url("~@/assets/images/push/xiaji-press@2x.png");
      }
    }
    &.member-unactive {
      i {
        background-image: url("~@/assets/images/push/xiaji-normal@2x.png");
      }
      p {
        color: #919191;
        .font-regular;
      }
    }
    /*业绩*/
    &.performance-active {
      i {
        background-image: url("~@/assets/images/secondPush/yeji-perss@2x.png");
      }
    }
    &.performance-unactive {
      i {
        background-image: url("~@/assets/images/secondPush/yeji-normal@2x.png");
      }
      p {
        color: #919191;
        .font-regular;
      }
    }

  }
</style>

